<template>
  <div class="container">
    <el-select v-model="filterForm.sn"
               filterable
               placeholder="请选择设备SN"
               @visible-change="handleSelection"
               ref="snValue"
               :clearable="true"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>

    <el-row class="optionGroup">
      <dropdown-menu active-color="#fd6e05" ref="optionGroup" duration="0">
        <dropdown-item title="交易时间" v-model="filterForm.createTime" ref="option">
          <DatePicker
            mode='range'
            v-model="filterForm.dateRange"
            is-expanded
            color="orange"
            :is-inline="true"
            :show-caps="true"
            v-loading="loading"
          >
          </DatePicker>
          <el-button class="themeButton" @click.native="handleReset">重置</el-button>
        </dropdown-item>
        <dropdown-item title="支付方式" v-model="filterForm.operationMethod" :options="option2" ref="option"/>
        <dropdown-item title="交易状态" v-model="filterForm.orderStatus" :options="option3" ref="option"/>
      </dropdown-menu>
    </el-row>

    <el-row class="cardGroup" v-loading="loading">
      <div class="no-content" v-show="show">
        <img :src="noContent" alt="" width="200">
        <span>暂无数据</span>
      </div>
      <!--      <el-empty :image="noContent" :image-size="200" v-show="show"></el-empty>-->
      <el-card class="box-card" shadow="hover" v-for="item in listItemForm" :key="item.index">
        <div slot="header" class="clearfix">
          <div class="serialNumber">
            设备SN：{{ item.sn }}
          </div>
          <div class="orderStatus"
               :class="item.orderStatus === 1 ? 'success' : item.orderStatus === 2 ? 'fail' : 'unpaid'">
            {{ item.orderStatus === 1 ? '支付成功' : item.orderStatus === 2 ? '支付失败' : '待支付' }}
          </div>
        </div>
        <div class="details">
          <div class="createTime">
            <span>支付方式：</span>
            <span>
              {{ item.operationMethod === 1 ? '商户扫用户二维码' : item.operationMethod === 2 ? '用户扫商户二维码' : '刷脸支付' }}
            </span>
          </div>
          <div class="orderId">
            <span>交易时间：</span>
            <span>{{ item.createTime }}</span>
          </div>
          <div class="expCompany">
            <span>交易金额：</span>
            <span style="font-weight: bold;">￥{{ item.amount }}</span>
          </div>
        </div>
        <div class="amount">
          <span>订单号：</span>
          <span style="overflow: scroll; white-space: nowrap;">{{ item.orderNo }}</span>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import {DropdownItem, DropdownMenu} from 'vant';
import noContent from "@/assets/images/withdraw/no_content.png"
import Calendar from 'v-calendar/lib/components/calendar.umd'
import DatePicker from 'v-calendar/lib/components/date-picker.umd'
import moment from 'moment'

export default {
  name: "index",
  components: {
    DropdownMenu,
    DropdownItem,
    Calendar,
    DatePicker
  },
  data() {
    return {
      options: [],
      loading: false,
      show: false,
      noContent: noContent,
      listItemForm: [],
      fakeApiData: [
        {
          amount: 0.01,
          createTime: "2021-07-12",
          operationMethod: 2,
          orderNo: "202107221851189930001",
          orderStatus: 0,
          sn: "FPAL11920010152TZH1261"
        },
        {
          amount: 0.01,
          createTime: "2021-07-15",
          operationMethod: 1,
          orderNo: "202107221851189930001",
          orderStatus: 1,
          sn: "FPAL11920010152TZH1262"
        },
        {
          amount: 0.01,
          createTime: "2021-08-02",
          operationMethod: 3,
          orderNo: "202107221851189930001",
          orderStatus: 2,
          sn: "FPAL11920010152TZH1263"
        },
        {
          amount: 0.01,
          createTime: "2021-07-22",
          operationMethod: 3,
          orderNo: "202107221851189930001",
          orderStatus: 0,
          sn: "FPAL11920010152TZH1262"
        },
        {
          amount: 0.01,
          createTime: "2021-07-30",
          operationMethod: 1,
          orderNo: "202107221851189930001",
          orderStatus: 2,
          sn: "FPAL11920010152TZH1262"
        },
        {
          amount: 0.01,
          createTime: "2021-08-12",
          operationMethod: 1,
          orderNo: "202107221851189930001",
          orderStatus: 1,
          sn: "FPAL11920010152TZH1261"
        },
        {
          amount: 0.01,
          createTime: "2021-08-07",
          operationMethod: 2,
          orderNo: "202107221851189930001",
          orderStatus: 1,
          sn: "FPAL11920010152TZH1262"
        }
      ],
      dateRange: null,
      myAttrs: [
        {
          highlight: {
            style: {
              background: "#fd6e05"
            },
            contentStyle: {
              color: "red"
            }
          }
        }
      ],
      option2: [
        {text: '全部', value: null},
        {text: '商户扫用户二维码', value: 1},
        {text: '用户扫商户二维码', value: 2},
        {text: '刷脸支付', value: 3},
      ],
      option3: [
        {text: '全部', value: null},
        {text: '待支付', value: 0},
        {text: '交易成功', value: 1},
        {text: '交易失败', value: 2}
      ],
      //过滤器
      filterForm: {
        amount: null,
        createTime: null,
        operationMethod: null,
        orderNo: "",
        orderStatus: null,
        sn: "",
        dateRange: {
          start: null,
          end: null
        }
      },
      formattedDate: {
        start: null,
        end: null
      }
    }
  },
  watch: {
    listItemForm: function (val) {
      this.show = !val || val.length === 0 || val === "";
    },
    filterForm: {
      handler(val) {
        const that = this;
        let rangeFlag = !val.dateRange || !val.dateRange.start || !val.dateRange.end;
        if (val.amount === null && val.createTime === null
          && val.operationMethod === null && val.orderNo === ""
          && val.orderStatus === null && val.sn === "" && rangeFlag) {
          this.loading = true
          setTimeout(() => {
            this.listItemForm = this.fakeApiData
            that.loading = false
          }, 500)
        } else {
          this.loadHandle(() => {
            this.listItemForm = this.fakeApiData.filter(v => {
              if (val.sn === "") return true
              return v.sn === val.sn
            }).filter(v => {
              if (val.operationMethod === null) return true
              return v.operationMethod === val.operationMethod
            }).filter(v => {
              if (val.orderStatus === null) return true
              return v.orderStatus === val.orderStatus
            }).filter(v => {
              if (val.dateRange.start === null || val.dateRange.end === null) return true
              return v.createTime >= moment(val.dateRange.start).format('YYYY-MM-DD')
                && v.createTime <= moment(val.dateRange.end).format('YYYY-MM-DD')
            })
          })
        }
      }
      , deep: true
    },
    /*'filterForm.sn': function () {
      console.log(this.filterForm)
      this.loadHandle(() => {
        this.listItemForm = this.fakeApiData.filter(v => {
          return v.sn === this.filterForm.sn
        })
      })
    },
    'filterForm.dateRange': function (dateRange) {
      if (!dateRange) return
      this.loadHandle(() => {
        this.listItemForm = this.fakeApiData.filter(v => {
          return v.createTime >= moment(dateRange.start).format('YYYY-MM-DD')
            && v.createTime <= moment(dateRange.end).format('YYYY-MM-DD')
        })
      })
    },
    'filterForm.operationMethod': function () {
      this.loadHandle(() => {
        this.listItemForm = this.fakeApiData.filter(v => {
          return v.operationMethod === this.filterForm.operationMethod
        })
      })
    },
    'filterForm.orderStatus': function () {
      this.loadHandle(() => {
        this.listItemForm = this.fakeApiData.filter(v => {
          return v.orderStatus === this.filterForm.orderStatus
        })
      })
    }*/
  },

  created() {
    const that = this
    that.listItemForm = that.fakeApiData
  },
  computed: {},
  methods: {
    loadHandle(func) {
      this.loading = true
      setTimeout(() => {
        try {
          func()
        } finally {
          this.loading = false
        }
      }, 500)
    },
    handleSelection() {
      let set = new Set()
      this.options = this.fakeApiData.map((item) => ({
        value: item.sn,
        label: item.sn
      })).filter(item => {
        if (set.has(item.value)) {
          return false
        } else {
          set.add(item.value)
          return true
        }
      })
      /*const map = new Map
      let arr = this.fakeApiData
      let uniqueArr = arr.filter(
        (arr) => !map.has(arr.sn) && map.set(arr.sn, 1)
      )
      this.options = uniqueArr.map((item) => ({
        value: item.sn,
        label: item.sn
      }))*/
      this.options.unshift({
        value: "",
        label: "全部"
      })
    },
    handleReset() {
      this.filterForm.dateRange.start = null
      this.filterForm.dateRange.end = null
    },
  }
}
</script>

<style lang="scss" scoped>
> > > .el-loading-mask {
  z-index: 1;
  min-height: 100vh;

  .el-loading-spinner {
    top: 50%;
    width: 100%
  }
}

.container {
  padding-bottom: 0;
}

.container > > > .el-select {
  width: 100%;
  height: 32px;

  .el-input {
    z-index: -1;
  }

  .el-input--suffix .el-input__inner {
    border-radius: 17px;
    height: 32px;
  }

  .el-input__suffix {
    .el-input__suffix-inner {
      .el-select__caret {
        filter: saturate(0%);
        opacity: .6;
        transition: .3s ease-in-out;
      }
    }

    .is-reverse {
      opacity: 1 !important;
      filter: saturate(100%) !important;
      margin-top: 1px;
    }

    .el-input__suffix-inner i {
      position: relative;

      &::before {
        content: url("../../assets/images/withdraw/arrow_down.png");
        position: absolute;
        width: 100%;
        height: 100%;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}

.optionGroup {
  margin: 15px auto;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;

  > > > .van-dropdown-item {
    .van-overlay {
      //background: transparent;
    }
  }

  > > > .van-dropdown-menu__bar {
    height: 50px;
    box-shadow: none;
    padding-right: 8px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  > > > .van-dropdown-menu__item {
    //padding: 12px 24px;
    border: 0;
    font-size: 14px;

    .van-dropdown-menu__title {
      font-size: 14px;
      color: #333;

      &::after {
        border-color: transparent transparent #333 #333;
      }
    }


    .van-dropdown-menu__title--down::after {
      border-color: transparent transparent #FD6E05 #FD6E05;
    }
  }

  > > > .van-dropdown-item__content {
    margin: 0 15px;
    width: calc(100vw - 30px);
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;

    .el-loading-mask {
      min-height: unset;

      .el-loading-spinner {
        display: none;
      }
    }

    .van-cell {
      margin: 0 15px;
      width: calc(100% - 30px);
      border-color: #EBEEF5;
      padding: 14px 12px;

      &:first-child {
        border-top: 1px solid #EBEEF5;
      }

      &:last-child {
        border-bottom: 0;
      }

      &::after {
        width: 100%;
        left: 0;
        transform: scale(1);
      }
    }

    .van-cell__value {
      display: none;
    }
  }

}

.cardGroup {
  .box-card {
    width: 100%;

    .clearfix {
      color: #1e2431;
      font-weight: bold;
      font-size: 13px;
      display: flex;
      justify-content: space-between;

      .serialNumber {
        position: relative;

        &::before {
          content: '';
          display: block;
          position: absolute;
          left: -16px;
          top: 47%;
          transform: translateY(-50%);
          height: 16px;
          width: 5px;
          background: linear-gradient(to bottom, rgba(253, 110, 5, .4), rgba(253, 110, 5, .8))
        }
      }
    }
  }
}

.el-card {
  box-sizing: border-box;
  padding: 0 16px;
  border: 0;
  margin-bottom: 14px;

  & > > > .el-card__header {
    padding: 14px 0;
  }

  & > > > .el-card__body {
    padding: 0;
  }

  .details {
    padding: 12px 0;
    color: rgba(30, 36, 49, .7);

    div {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      line-height: 28px;
    }
  }

  .amount {
    display: flex;
    justify-content: space-between;
    height: 20px;
    line-height: 20px;
    padding: 15px 0;
    font-size: 14px;
    border-top: 1px solid #EBEEF5;
    color: rgba(30, 36, 49, .7);

    span {
      max-width: 75%;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .remark {
      width: 100%;
      height: 100%;
      padding: 4px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(253, 110, 5, 0.05);
      border-radius: 2px;
      color: rgba(30, 36, 49, .7);
      font-size: 13px;
    }
  }
}

.success {
  color: #fd6e05;
  opacity: 1;
}

.fail {
  color: rgba(254, 66, 66, 1);
  opacity: 1;
}

.unpaid {
  color: #333;
  opacity: .4;
}

.no-content {
  height: 50vh;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 14px;
  color: rgba(51, 51, 51, .4);
}

.themeButton {
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  bottom: 15px;
  font-size: 12px;
  padding: 8px 24px;
  border-radius: 4px;
  transform: translateX(-50%);
  color: #FD6E05;
  opacity: 1;
  border: 0;
  transition: all .3s ease;
  background: transparent;

  &:hover,
  &:active {
    color: #fff;
    background: linear-gradient(90deg, rgba(253, 110, 5, 0.66) 10%, #fd6e05 81%);
    filter: brightness(1.1);
    box-shadow: 0 7px 25px 0 rgba(253, 110, 5, 0.41);
  }
}


/*>>> .createDate {
  width: calc(100% - 30px);
  margin-top: 135px !important;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 4px;

  .el-dialog__header {
    padding: 0;

    .optionGroup {
      padding-top: 15px;
    }
  }

  .el-dialog__body {
    width: 100%;
    padding: 0 0 2px;
    text-align: center;
  }

  .el-dialog__footer {
    padding: 0 34px 34px;
  }
}*/

/*.tabsGroup {
  padding-top: 12px;

  .el-radio-group {
    padding: 0 12px;
    max-height: 30vh;
    overflow: scroll;
    width: 100%;
    box-sizing: border-box;

    .el-radio {
      padding: 18px 0;
      display: flex;
      justify-content: flex-start;
      width: inherit;
      box-sizing: border-box;
      border-bottom: 1px solid #EBEEF5;

      &:first-child {
        border-top: 1px solid #EBEEF5;
      }

      &:last-child {
        border-bottom: 0;
      }

      >>> .el-radio__input {
        display: none;
      }
    }
  }
}*/


</style>

<style lang="scss">
.el-tabs--card > .el-tabs__header,
.el-tabs--card > .el-tabs__header .el-tabs__nav,
.el-tabs--card > .el-tabs__header .el-tabs__item {
  border: 0;
}

.el-tabs__header {
  margin: 0;
}

.el-tabs__item {
  padding: 0 !important;
}

.el-tabs__nav {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 4px;
}

.vc-container {
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  margin-bottom: 45px;

  .vc-grid-container {
    gap: 2px 0 !important;
  }

  .vc-w-full {
    width: calc(100% - 30px);
    margin: 0 auto;
    border-top: 1px solid #EBEEF5;

    .vc-arrows-container {
      height: 20px;
      padding: 0 18px;
      margin-top: 10px;

      .vc-svg-icon {
        color: rgba(30, 36, 49, .5);
        width: 10px;
      }
    }

    .vc-title {
      font-size: 14px;
    }

    .vc-weekday {
      color: rgba(30, 36, 49, .7);
      font-size: 10px;
    }

    .vc-day-content {
      font-weight: bold;
      font-size: 12px;
    }

    .vc-weeks {
      padding-top: 12px;
    }

    .vc-popover-content {
      border-radius: 0;
      background: #FFFFFF;
      border: 0;
      box-shadow: 0 6px 14px -2px rgba(20, 20, 20, .15);
    }

    span[role=button] {
      color: rgba(30, 36, 49, .7);
      font-size: 12px;
      border: 0;
      padding: 10px 8px;
      border-radius: 30px;
      box-shadow: none;
      transition: .13s all ease;
      position: relative;

      &:hover,
      &:focus {
        background: linear-gradient(90deg, rgba(253, 110, 5, 0.66) 10%, #fd6e05 70%);
        color: #fff;
        box-shadow: 0 4px 8px 0 rgba(253, 110, 5, 0.41);
      }
    }

    span[role=button].vc-nav-arrow {
      &:hover,
      &:focus {
        background: transparent;
        color: #FD6E05;
        box-shadow: none;
      }
    }

    span[role=button].vc-nav-title {
      &:hover,
      &:focus {
        background: transparent;
        color: #FD6E05;
        box-shadow: none;
      }
    }

    .vc-popover-content-wrapper {
      .vc-nav-container {
      }
    }
  }
}

.vc-bg-orange-100 {
  background-color: rgba(253, 110, 5, .13);
}

.vc-bg-orange-200 {
  background-color: rgba(253, 110, 5, .13)
}

.vc-bg-orange-300 {
  background-color: rgba(253, 110, 5, .3)
}

.vc-bg-orange-400 {
  background-color: rgba(253, 110, 5, .4)
}

.vc-bg-orange-500 {
  background-color: rgba(253, 110, 5, .5)
}

.vc-bg-orange-600 {
  background-color: #fd6e05
}

.vc-bg-orange-700 {
  background-color: #c05621
}

.vc-bg-orange-800 {
  background-color: #9c4221
}

.vc-text-orange-900 {
  color: #fd6e05
}

.vc-border-orange-700 {
  border-color: #FD6E05;
}

.vc-day-content:hover {
  background-color: transparent !important;
}

</style>
